import React, { Component } from 'react'
import "../style/index.less";
import GoBack from '@/components/TheGoBack'
import { apiStoreInfoDetail } from '@/request/store'
import TheImage from '@/components/TheImage'
import { Image } from 'antd';

export default class Details extends Component {
  state = {
    storeInformation: [],
    quaInformation: [],
    legalInformation: []
  }
  async componentDidMount() {
    await this.getData()
  }
  getData = async () => {
    const { id } = this.props.match.params
    let res = await apiStoreInfoDetail({ storeId: id })
    if (res.data && res.code === 0) {
      let data = res.data
      let storeInformation = [
        {
          title: '门店名称',
          value: data.storeName
        },
        {
          title: '联系人',
          value: data.storeContacts
        },
        {
          title: '联系电话',
          value: data.userMobile
        },
        {
          title: '门店标签',
          value: data.storeServiceNames
        },
        {
          title: '门店图片',
          value: <Image src={data.storeShowFile} width={80} height={80} />
        },
        {
          title: '店铺环境',
          value: data.storeEnvironment.split(',').map(v => {
            return <Image src={v} width={80} height={80} />
          })
        },
        {
          title: '店铺logo',
          value: <Image src={data.storeLogo} width={80} height={80} />
        },
      ]
      let quaInformation = [
        {
          title: '门店所在地区',
          value: `${data.addressProvince} ${data.addressCity} ${data.addressDistrict}`
        },
        {
          title: '门店地址',
          value: data.addressMapLocation
        },
        {
          title: '详细地址',
          value: data.addressDetail
        },
        {
          title: '营业执照',
          value: <Image src={data.businessLicense} width={80} height={80} />
        },
      ]
      let legalInformation = [
        {
          title: '法人身份证正面',
          value: <Image src={data.corporateIdentityCardPositive} width={80} height={80} />
        },
        {
          title: '法人身份证背面',
          value: <Image src={data.corporateIdentityCardBack} width={80} height={80} />
        },
        {
          title: '收款账号(支付宝)',
          value: data.alipayAccount
        },
      ]
      this.setState({ storeInformation, quaInformation, legalInformation })
    }
  }
  render() {
    const { storeInformation, quaInformation, legalInformation } = this.state
    return (
      <div className="settings-box">
        <GoBack title={'门店详情'} history={this.props.history} />
        <div className="title">门店信息</div>
        <div className="store-details-content">
          {
            storeInformation.map((v, i) => {
              return <div className='information-box' key={i}>
                <div>{v.title}</div>
                <div>{v.value}</div>
              </div>
            })
          }
        </div>
        <div className="title">资质信息</div>
        <div className="store-details-content">
          {
            quaInformation.map((v, i) => {
              return <div className='information-box' key={i}>
                <div>{v.title}</div>
                <div>{v.value}</div>
              </div>
            })
          }
        </div>
        <div className="title">法人信息</div>
        <div className="store-details-content">
          {
            legalInformation.map((v, i) => {
              return <div className='information-box' key={i}>
                <div>{v.title}</div>
                <div>{v.value}</div>
              </div>
            })
          }
        </div>
      </div>
    )
  }
}
